{% extends "backEndBase.html" %}

{% block content %}
<div class="container p-3">
    <h2>学生信息管理</h2>
</div>
<div class="container mt-3 text-center table-responsive">
    <table id="stuTable" class="table table-bordered">
        <thead>
        <tr>
            <th>姓名</th>
            <th>学校</th>
            <th>专业</th>
            <th>学号</th>
            <th>用户名</th>
            <th>密码</th>
        </tr>
        </thead>
        <tbody>
        <!-- 这里要用jinja2写一个for循环 -->
        {% for item in items %}
        <tr>
            <td>{{ item.trueName }}</td>
            <td>{{ item.school }}</td>
            <td>{{ item.major }}</td>
            <td>{{ item.schoolId }}</td>
            <td>{{ item.userName }}</td>
            <td>{{ item.passWord }}</td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

<div class="container text-center">
    <a href={{url_for("backend.addStu")}} class="btn btn-success add-stu-info">添加</a>
    <a href="#" class="btn btn-primary" id="mod-stu-info" onclick="modStu(0)">修改</a>
    <a href="#" class="btn btn-danger" id="del-stu-info" onclick="modStu(1)">删除</a>
</div>
<script>
                    var table = document.getElementById("stuTable");
                    // 为表格的每一行添加点击事件
                    for (var i = 0; i < table.rows.length; i++) {
                        if (table.rows[i].parentNode.tagName == "THEAD")
                            continue;
                        table.rows[i].onclick = function () {
                            if (this.classList.contains('table-active')) {
                                this.classList.remove('table-active');
                                return;
                            }
                            var parentNode = this.parentNode;
                            for (var j = 0; j < parentNode.children.length; j++)
                                parentNode.children[j].classList.remove('table-active');
                            this.classList.add('table-active');
                            // this.addClass('table-active').siblings().removeClass('table-active');
                        };
                    }



</script>
<script type="text/javascript" language="javascript">
                    function modStu(op) {
                        var rows = document.getElementsByClassName("table-active");
                        // 为空则直接返回
                        if (rows.length <= 0 || rows.length > 1)
                            return;
                        var row = rows[0];
                        var name = row.children[0].innerHTML;
                        var school = row.children[1].innerHTML;
                        var major = row.children[2].innerHTML;
                        var schoolId = row.children[3].innerHTML;
                        var userName = row.children[4].innerHTML;
                        var passWord = row.children[5].innerHTML;
                        if (op == 0) {
                            console.log(name);
                            localStorage.setItem("name", name);
                            localStorage.setItem("trueName", name);
                            localStorage.setItem("school", school);
                            localStorage.setItem("major", major);
                            localStorage.setItem("schoolId", schoolId);
                            localStorage.setItem("userName", userName);
                            localStorage.setItem("passWord", passWord);
                            location.href = "{{url_for("backend.modStu")}}";
                        }
                        else {
                            // 删除学生
                            var myForm = document.createElement("form");
                            myForm.method = "post";
                            myForm.action ="{{url_for("backend.delStu")}}";
                            var myInput = document.createElement("input");
                            myInput.setAttribute("name", "userName");
                            myInput.setAttribute("value", userName);
                            myForm.appendChild(myInput);
                            document.body.appendChild(myForm);
                            myForm.submit();
                            document.body.removeChild(myForm);  // 提交后移除创建的form
                        }
                    }

</script>
{% endblock %}